import React, { Component } from 'react'
import { Route, Switch, Link } from 'react-router-dom'

// 引入对应的子路由渲染的组件
import Dashboard from '../Dashboard'
import User from '../User'

// 引入样式
import { Container } from './style'

class Admin extends Component {
  render() {
    // 在此处通过this.props.match.path得到当前子路由的父路由路径，用此变量来完成子路由路由的拼接
    // 好处：日后如果父路由规则名称修改了，则子路由无需修改
    const prefixUrl = this.props.match.path

    return (
      <Container>
        <header>后台导航</header>
        <div>
          <div>
            <Link to={`${prefixUrl}/dashboard`}>首页</Link>
          </div>
          <div>
            <Link to={`${prefixUrl}/user`}>用户</Link>
          </div>
        </div>
        <div>
          <Switch>
            {/* 子路由中一定要写上父路由的地址 */}
            <Route path={`${prefixUrl}/dashboard`} component={Dashboard} />
            <Route path={`${prefixUrl}/user`} component={User} />
          </Switch>
        </div>
      </Container>
    )
  }
}

export default Admin
